<template>
  <div>
    <input type="text" v-model='msg'>
    <!-- 使用过滤器，将data中的数据输出到页面时，经过一次upper过滤 -->
    <div>{{ msg | upper }}</div>
    <!-- 使用两个过滤器，级联的方式，upper过滤器的结果，再经过lower过滤器的过滤 -->
    <div>{{ msg | upper | appParms }}</div>
    <!-- 属性abc的值，会是msg经过upper过滤器的结果 -->
    <div :abc='msg | upper'>测试数据</div>

    <div>{{ date | format("yyyy-MM-dd") }}</div>
  </div>
</template>

<script>
export default {
  name: "TestFilter",
  data() {
    return {
      msg: '',
      date: new Date()
    }
  },
  /* 局部过滤器，定义在vue对象里面 */
  filters: {
    upper: function (val) {
      return val.charAt(0).toUpperCase() + val.slice(1);
    }
  }
}
</script>

<style scoped>

</style>